什麼是 box model 呢？其實就是定義網頁的區塊位置，排出想要的版型

我們會把網頁化成很多區塊，例如在<aside>的架構裡你想做兩個區區塊，但是你希望在下 CSS 指令的時候，不會同時做效果，這時候適時地使用<div> </div>標籤是有幫助的。

當我們用 <div> </div> 區塊來放置內容，我們可以它看成一個盒子，透過語法來控制內邊界、外邊界和邊框的屬性來調整盒子的呈現樣貌。

上一段我們有提到內邊界（padding）、外邊界（margin）和邊框 (border)，我們就用以下的圖示來了解一下

padding(內邊界)

p {
 padding-left: 10px;
 padding-right: 10px;
 padding-top: 10px;
 padding-bottom: 10px;
}

這個意思是我們希望這個元素的內容和邊框希望上下左右各距離 10px。

我們試著讓他在編輯器和瀏覽器上呈現：

那在 CSS 中在對 p 元素做設定的時候，我也一並設定了這個元素的寬(width), 和 高(height)，單元我就用 px 表示，並透過用background-color將屬性設為紅色，更好觀察它的變化，這個地方若是沒有設定寬和高，畫面則會一直延伸下去，因為 HTML 中是沒有排版和自動換行的功能。

border

其實就是元素的邊框，你可以為其設計粗細和顏色，那我們就試著把剛才的語法加上兩條border:20px solid yellow;到編輯器中，也一起看看在瀏覽器的畫面：

從 border:20px solid yellow 來看如果四邊都⼀樣，可這樣簡寫成border:20px 就可以

p {
     
 border: 10px 10px 10px 10px; "/ 依序上、右、下、左四邊都設定 10 像素的外邊框 "
 border: 10px; "/ 如果四邊都⼀樣，可這樣簡寫 "
 border: 10px 5px 10px 5px;  "/ 上、下都是 10 像素，左、右是 5 像素的外邊框 "
 mborder: 10px 5px; "/ 如果上下⼀樣、左右⼀樣，可這樣簡寫 "*
}

而框線的屬性也有下面幾種

p {border:solid;}實線
p {border:dashed;}虛線
p {border:double;}雙線
p {border:dotted;}點線
p {border:groove;}凹線

所以要做 border 的變化時：後面屬性可以接框線粗細(px)，再接線條的形式，最後可接顏色，順序可調換，不需要任何符號隔開。

margin 外邊界

通常用來定義 div 與外邊界的距離。
margin 可以的值有 auto、長度單位與 %。設定 div 的 width 屬性，可以避免該元素從左到右撐滿容器，然後你可以設定左右外邊界為 auto 來使其水平居中。

元素在顯示的時候，只會顯示到你所指定的寬度，然後剩餘的寬度平均的散落在左右兩邊的邊距上。

p {
 margin-left: 10px;
 margin:auto;
}

如果它的值設成 auto 的話，就會讓 div 盒子內的元素水平置中。

小結

Box 的實際寬度 (高度) 是由 padding + border + width (height) 所組成。

基本上，我們看得的很多網頁是以此基礎，裡面會有很多小盒子(div 區塊)，我們在設計時，最好有合適的工具來畫出來，這樣子才不會在開發上，因為太多區塊而錯亂，造成之後的維護不易。